.close-button {
    // keep in sync with CLOSE_BUTTON_SIZE in CloseButton.tsx
    $size: 32px;

    $light-stroke: $gray-20;

    $active-fill: #dbe5f0;
    $hover-fill: $gray-10;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    height: $size;
    width: $size;
    padding: 7px;

    color: $light-text;
    background: white;
    border: 1px solid $light-stroke;
    border-radius: 50%;

    &:hover {
        background: $hover-fill;
        border-color: $hover-fill;
        cursor: pointer;
        color: $dark-text;
    }

    &:active {
        background: $active-fill;
        border: 1px solid $active-fill;
    }

    svg {
        height: 14px;
        width: 14px;
    }
}
